<template>
  <div class="address">
    <div class="title">
      <div class="text">Управление адресами</div>
      <div class="add">
        <el-icon><Plus /></el-icon>
        <div style="margin-left: 6px;position:relative;bottom: 1px">Дополнительные</div>
      </div>
    </div>
    <div class="addressList">
      <div class="item"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue"
import {Plus} from "@element-plus/icons-vue";
</script>
<style scoped lang="less">
.address{
  width: 1164px;
  height: 527px;
  background: #FFFFFF;
  border-radius: 16px 16px 16px 16px;
  padding: 20px;
  box-sizing: border-box;
  .title{
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #EEEEEE;
    .text{
      font-family: Segoe UI, Segoe UI;
      font-weight: bold;
      font-size: 24px;
      color: #333333;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .add{
      display: flex;
      align-items: center;
      font-family: Segoe UI, Segoe UI;
      font-weight: 600;
      font-size: 16px;
      color: #0070E9;
      line-height: 16px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
    }
  }
  .addressList{
    margin-top: 20px;
    .item{
      width: 520px;
      height: 120px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #CCCCCC;
      background-image: url('/src/assets/image/dzbj.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
}
</style>
